<template>
  <div id="myAppStatistics">
    <h2>我的应用统计分析</h2>
    <a-input-search
      :style="{ width: '320px' }"
      placeholder="输入 appId"
      button-text="搜索"
      search-button
      @search="(value) => getAppAnswer(value)"
    />
    <div style="margin-bottom: 40px"></div>
    <v-chart :option="appAnswerOption" style="height: 300px" />
  </div>
</template>

<script setup lang="ts">
//获取数据
import { computed, ref } from "vue";
import { getAppAnswerStatisticsUsingGet } from "@/api/statisticsController";
import VChart from "vue-echarts";
import "echarts";
import API from "@/api";
import message from "@arco-design/web-vue/es/message";

const appAnswer = ref<API.AppAnswerStatisticsDTO[]>([]);

const getAppAnswer = async (appId: string) => {
  const res = await getAppAnswerStatisticsUsingGet({
    appId: appId as any,
  });
  if (res.data.code === 0) {
    appAnswer.value = res.data.data || [];
  } else {
    message.error("获取失败," + res.data.message);
  }
};

const appAnswerOption = computed(() => {
  return {
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: appAnswer.value.map((item) => {
          return { value: item.answerCount, name: item.resultName };
        }),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
});
</script>

<style scoped></style>
